<div>
  <div
    ng-if="matchingIndicesList.isLoading"
    class="euiPanel euiPanel--paddingMedium"
  >
    <h2 class="euiTitle euiTextColor euiTextColor--subdued" style="text-align:center">
      Looking for matching indices
    </h2>
    <div class="euiSpacer euiSpacer--s"></div>
    <p class="euiTextColor euiTextColor--subdued" style="text-align:center">
      Just a sec...
    </p>
  </div>

  <div class="euiSpacer euiSpacer--s"></div>

  <div
    ng-if="!matchingIndicesList.isLoading"
    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
  >
    <div class="euiFlexItem euiFlexItem--flexGrowZero">
      <p>
        <ng-transclude></ng-transclude>
        <span
          ng-if="matchingIndicesList.hasMultiplePages()"
          class="euiTextColor euiTextColor--subdued euiText euiText--small"
        >
          (representative sample only)
        </span>
      </p>
    </div>
    <div
      class="euiFlexItem euiFlexItem--flexGrowZero"
      ng-if="matchingIndicesList.hasMultiplePages()"
    >
      <div class="euiPagination">
        <button
          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
          type="button"
          ng-if="matchingIndicesList.pager.hasPreviousPage"
          ng-click="matchingIndicesList.onPagePrevious()"
        >
          <span class="euiButtonEmpty__content">
            <svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
              <defs>
                <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"></path>
              </defs>
              <use fill-rule="nonzero" transform="rotate(90 8 8)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow_left-a">
              </use>
            </svg>
            <span>Previous</span>
          </span>
        </button>
        <button
          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
          ng-class="{
            'euiPaginationButton-isActive': true || page == matchingIndicesList.pager.currentPage
          }"
          type="button"
          ng-repeatt="page in matchingIndicesList.getPaginationList()"
          ng-clickk="matchingIndicesList.goToPage(page)"
        >
          <span class="euiButtonEmpty__content">
            <span>{{matchingIndicesList.pager.currentPage}}</span>
          </span>
        </button>
        <button
          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--iconRight euiPaginationButton"
          type="button"
          ng-if="matchingIndicesList.pager.hasNextPage"
          ng-click="matchingIndicesList.onPageNext()"
        >
          <span class="euiButtonEmpty__content">
            <svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
            width="16" height="16" viewBox="0 0 16 16">
              <defs>
                <path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
                />
              </defs>
              <use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
              />
            </svg>
            <span>Next</span>
          </span>
        </button>
      </div>
    </div>
  </div>

  <div class="euiSpacer euiSpacer--m"></div>

  <table
    ng-if="!matchingIndicesList.isLoading"
    class="euiTable"
  >
    <tbody>
      <!-- Indices list -->
      <tr
        class="euiTableRow"
        ng-repeat="index in matchingIndicesList.pageOfIndices"
      >
        <td class="euiTableRowCell">
          <span
            class="euiTableCellContent"
            ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern"
          ></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
